<template>

  <a-layout>
    <a-layout-sider theme="light" width="160px" class="menu-container" :collapsed="collapsed">
      <a-button type="default" style="margin-bottom: 16px; margin-left: 20px" @click="toggleCollapsed">
        <MenuUnfoldOutlined v-if="collapsed"/>
        <MenuFoldOutlined v-else/>
      </a-button>
      <a-menu mode="inline" :inline-collapsed="collapsed">
        <a-sub-menu>
          <template #title>盲盒</template>
          <a-menu-item v-for="item in blindBoxItems" :key="item">
            <router-link :to="'/blindBox?sub=' + item">{{ item }}</router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu>
          <template #title>记单词</template>

          <a-menu-item v-for="item in reciteWordItems" :key="item">
            <router-link :to="'/reciteWord?sub=' + item">{{ item }}</router-link>
          </a-menu-item>
        </a-sub-menu>

        <a-sub-menu>
          <template #title>转盘</template>

          <a-menu-item v-for="item in spinnerItems" :key="item">
            <router-link :to="'/spinner?sub=' + item">{{ item }}</router-link>
          </a-menu-item>
        </a-sub-menu>


        <a-menu-item>
          <template #title>关于</template>
          <router-link to="/about">关于</router-link>
        </a-menu-item>

      </a-menu>
    </a-layout-sider>

    <a-layout-content class="content-container">
      <router-view></router-view>
    </a-layout-content>
  </a-layout>
</template>

<script setup lang="ts">
import {invoke} from "@tauri-apps/api/core";
import {ref} from "vue";
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
} from '@ant-design/icons-vue';

let blindBoxItems = ref<string[]>()
let reciteWordItems = ref<string[]>()
let spinnerItems = ref<string[]>()
let collapsed = ref<boolean>(true)

// 获取二级路径
const getSubDirList = async function () {
  // 盲盒二级目录
  let blindBoxSubs: string[] = await invoke('get_sub_dir', {"dir": "/data/盲盒/"});
  blindBoxItems.value = blindBoxSubs;

  // 记单词二级目录
  let reciteWordSubs: string[] = await invoke('get_sub_dir', {"dir": "/data/记单词/"});
  reciteWordItems.value = reciteWordSubs

  // 转盘二级目录
  let spinnerSubs: string[] = ["转盘1"]
  spinnerItems.value = spinnerSubs;
}


const toggleCollapsed = function () {
  collapsed.value = !collapsed.value
}

// 读取所有目录
getSubDirList()

</script>

<style scoped>
.content-container {
  border-radius: 5px;
  min-height: 95vh;
  background: linear-gradient(45deg, rgba(142, 197, 252, 1.000) 0.000%, rgba(141, 211, 255, 1.000) 25.000%, rgba(161, 216, 255, 1.000) 50.000%, rgba(193, 210, 255, 1.000) 75.000%, rgba(224, 195, 255, 1.000) 100.000%)
}


</style>